<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>昱杰后台UI框架</title>
<script type="text/javascript" src="../../static/library/jquery/jquery.js"></script>
<script type="text/javascript" src="../../static/library/lay_ui/js/lay_ui.js"></script>
<script type="text/javascript" src="../../static/library/i_check/i_check.js"></script>
<script type="text/javascript" src="../../static/library/xm_select.js"></script>
<script type="text/javascript" src="../../static/library/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../../static/library/jquery/color_picker.js"></script>
<script type="text/javascript" src="../../static/library/code_mirror/code_mirror.js"></script>
<script type="text/javascript" src="../../static/library/code_mirror/css.js"></script>
<script type="text/javascript" src="../../static/library/code_mirror/match_brackets.js"></script>
<script type="text/javascript" src="../../static/library/jquery/raty.js"></script>
<script type="text/javascript" src="../../static/yj.admin.ui/js/jquery/number.js"></script>
<script type="text/javascript" src="../../static/yj.admin.ui/js/common.js"></script>
<script type="text/javascript" src="../../static/yj.admin.ui/js/base.js"></script>
<script type="text/javascript" src="../../static/admin/js/form.js"></script>
<link rel="stylesheet" type="text/css" href="../../static/library/lay_ui/css/lay_ui.css">
<link rel="stylesheet" type="text/css" href="../../static/library/i_check/i_check.css">
<link rel="stylesheet" type="text/css" href="../../static/library/lay_ui/css/date.css">
<link rel="stylesheet" type="text/css" href="../../static/library/code_mirror/code_mirror.css">
<link rel="stylesheet" type="text/css" href="../../static/yj.admin.ui/iconfont/iconfont.css">
<link rel="stylesheet" type="text/css" href="../../static/yj.admin.ui/iconfont/iconfont_extra.css">
<link rel="stylesheet" type="text/css" href="../../static/yj.admin.ui/css/basic.css">
<link rel="stylesheet" type="text/css" href="../../static/admin/css/form.css">
<script type="text/javascript">
let CONFIG = {
  FOLD_MAIN_WIDTH: 'calc(100% - 122px)',
  EXPAND_MAIN_WIDTH: 'calc(100% - 322px)',
  MULTI_SELECT: '../../server/FormMultiSelect.html'
};
</script>
</head>

<body class="big">
<div class="left">
  <div class="logo"><a href="../index/index.html"><span class="iconfont icon-logo"></span></a></div>

  <ul class="navigator">
    <li><a href="../index/index.html"><span class="iconfont icon-index"></span> 首页</a></li>
    <li class="active"><a href="../form/index.html"><span class="iconfont icon-form"></span> 表单</a></li>
    <li><a href="../table/index.html"><span class="iconfont icon-table"></span> 表格</a></li>
    <li>
      <a href="javascript:"><span class="iconfont icon-search"></span> 搜索</a>
      <div class="child">
        <ul>
          <li><a href="../search/index.html">简单搜索</a></li>
          <li><a href="../search/advance.html">高级搜索</a></li>
        </ul>
      </div>
    </li>
    <li><a href="../tab/index.html"><span class="iconfont icon-tab"></span> Tab</a></li>
    <li><a href="../tip/index.html"><span class="iconfont icon-tip-info"></span> 提示</a></li>
    <li><a href="../layer/index.html"><span class="iconfont icon-layer"></span> 弹窗</a></li>
    <li>
      <a href="javascript:"><span class="iconfont icon-picture"></span> 图片</a>
      <div class="child">
        <ul>
          <li><a href="../picture_form/index.html">图片表单</a></li>
          <li><a href="../picture/index.html">图片管理</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href="javascript:"><span class="iconfont icon-case"></span> 案例</a>
      <div class="child">
        <ul>
          <li><a href="../user/index.html">用户管理</a></li>
          <li><a href="../product/index.html">商品管理</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href="javascript:"><span class="iconfont icon-profile"></span> </a>
      <div class="child">
        <ul>
          <li><a href="../profile/index.html">个人资料</a></li>
          <li><a href="../profile/loginRecord.html">登录记录</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

<div class="top">
  <h1>表单</h1>

  <div class="user">风形火影（创始人） [<a href="../profile/index.html">个人资料</a>] [<a href="../profile/loginRecord.html">登录记录</a>] [<a href="https://item.taobao.com/item.htm?id=531038056831" target="_blank">赞助作者</a>] [<a href="../login/index.html">退出</a>]</div>
</div>

<div class="main no-child-navigator">
  <div class="tool">
    <div class="row1">
      <ul class="tab">
        <li class="active"><a href="javascript:">常规表单</a></li>
        <li><a href="javascript:">富文本编辑器</a></li>
        <li><a href="javascript:">代码编辑器</a></li>
      </ul>
      <p class="clear"></p>
    </div>
  </div>

  <form method="post" action="" class="form layui-form">
    <table class="column">
      <tr><td>单行文本框：</td><td><input type="text" name="" class="text"></td><td>我是提示信息我是提示信息我是提示信息</td></tr>
      <tr><td>多行文本框：</td><td><textarea name="" class="textarea"></textarea><td>我是提示信息我是提示信息我是提示信息</td></tr>
      <tr><td>单 选 框：</td><td><div class="radio-box"><label><input type="radio" name="a">未选定</label></div><div class="radio-box"><label><input type="radio" name="a" checked>选定</label></div><div class="radio-box"><label><input type="radio" name="" disabled>未选定禁用</label></div><div class="radio-box"><label><input type="radio" name="" checked disabled>选定禁用</label></div></td></tr>
      <tr><td>复 选 框：</td><td><div class="check-box"><label><input type="checkbox" name="">未选定</label></div><div class="check-box"><label><input type="checkbox" name="" checked>选定</label></div><div class="check-box"><label><input type="checkbox" name="" disabled>未选定禁用</label></div><div class="check-box"><label><input type="checkbox" name="" checked disabled>选定禁用</label></div></td></tr>
      <tr><td>单选下拉框：</td><td><select name=""><option value="">请选择</option><option>恭喜发财</option><option>大吉大利</option></select></td></tr>
      <tr><td>复选下拉框：</td><td><input type="hidden" name="multi_select" value="1,2"><div class="multi_select xm-select"></div></td></tr>
      <tr><td>日期选择器：</td><td><input type="text" name="" class="text date"></td></tr>
      <tr><td>时间选择器：</td><td><input type="text" name="" class="text datetime"></td></tr>
      <tr><td>颜色选择器：</td><td><input type="text" name="" class="text color_picker"></td></tr>
      <tr><td>数字调节器：</td><td><div name="" value="" class="number"></div></td></tr>
      <tr><td>评分组件：</td><td><input type="hidden" name="score" value="5"><span class="score"></span> <span class="score_title">非常好</span></td></tr>
      <tr><td>按　　钮：</td><td><input type="button" value="按钮一" class="button"> <input type="button" value="按钮二" class="button secondary">
        <input type="button" value="按钮三" class="button third"> <input type="button" value="按钮禁用" disabled class="button disabled"></td></tr>
    </table>
    <table class="column none">
      <tr><td><textarea name="" id="TextArea1" class="ckeditor"></textarea></td></tr>
    </table>
    <table class="column none">
      <tr><td><textarea name="" class="code">@charset "utf-8";
.form table:nth-child(1) tr td:nth-child(1) {
	width: 84px;
}
.form table:nth-child(3) tr td:nth-child(1) {
	text-align: left;
}

.CodeMirror, .CodeMirror-scroll {
	height: 350px;
	max-height: 350px;
}</textarea></td></tr>
    </table>
  </form>
</div>

<div class="tip"><div><span class="iconfont color"></span> <span class="content"></span></div></div>

<!-- 统计代码，可自行删除 -->
<script type="text/javascript" src="https://hm.baidu.com/hm.js?20251d48ece63163142ffc452f2d4804" async></script>
</body>
</html>